<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchForm" class="search-form">
      <div>
        <el-form-item label="设备类型">
          <el-select
            style="width: 184px"
            v-model="searchForm.equipmentType"
            placeholder="请选择设备类型"
            size="small"
          >
            <el-option
              v-for="item in enums.EQUIPMENT_TYPE"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="升级类型">
          <el-select
            style="width: 184px"
            v-model="searchForm.upgradeType"
            placeholder="请选择升级类型"
            size="small"
          >
            <el-option
              v-for="item in enums.SOFTWARE_UPGRADE_TYPE"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            style="width: 184px"
            v-model="searchForm.status"
            placeholder="请选择状态"
            size="small"
          >
            <el-option
              v-for="item in enums.EQUIPMENT_UPGRADE_BATCH_STATUS"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="search_btns">
        <el-form-item>
          <el-button type="primary" size="medium" @click="getList"
            >查询</el-button
          >
          <el-button size="medium" @click="clearSearch">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <h3 class="titles">升级批次记录</h3>
    <el-table
      v-loading="listLoading"
      :data="logList"
      element-loading-text="加载中"
      border
      fit
    >
      <el-table-column align="center" label="ID" prop="id"> </el-table-column>
      <el-table-column label="升级类型" align="center">
        <template slot-scope="scope">
          <span>{{ formatUpdateType(scope.row.upgradeType) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="文件名称"
        prop="filename"
        align="center"
      ></el-table-column>

      <el-table-column
        label="升级个数"
        prop="upgradeCount"
        align="center"
      ></el-table-column>
      <el-table-column
        label="升级间隔(分钟)"
        prop="upgradeInterval"
        align="center"
      ></el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{
            formatStatus(scope.row.status)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="创建人"
        prop="createBy"
        align="center"
      ></el-table-column>

      <el-table-column align="center" prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="handleDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :page="searchForm.pageNum"
      :limit="searchForm.pageSize"
      :total="total"
      @pagination="pagination"
    />

    <!-- 详情弹框 -->
    <el-dialog title="升级详情" :visible.sync="detailVisible" width="86%" :close-on-click-modal="false">
      <el-table :data="detailData" v-loading="detailLoading">
        <el-table-column
          min-width="150"
          property="equipmentCode"
          label="设备编码"
        ></el-table-column>
        <!-- <el-table-column label="设备类型">
          <template slot-scope="scope">
            {{ formatEquipType(scope.row.equipmentType) }}
          </template>
        </el-table-column>
        <el-table-column label="升级类型" align="center">
          <template slot-scope="scope">
            <span>{{ formatUpdateType(scope.row.upgradeType) }}</span>
          </template>
        </el-table-column> -->
        <el-table-column property="filename" label="文件名称"></el-table-column>
        <!-- <el-table-column
          property="txnNo"
          label="流水号"
          width="120"
        ></el-table-column> -->
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{
              formatDetailStatus(scope.row.status)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="描述"></el-table-column>
        <el-table-column
          prop="responseTime"
          label="响应时间"
          width="150"
        ></el-table-column>
        <el-table-column label="结果">
          <template slot-scope="scope">
            {{ formatResult(scope.row.result) }}
          </template>
        </el-table-column>
        
        <el-table-column
          prop="requestVersionTime"
          label="查询版本时间"
          width="150"
        ></el-table-column>
        <el-table-column label="查询时状态">
          <template slot-scope="scope">
            {{ formatIsOnline(scope.row.queryIsOnline) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="responseVersionTime"
          label="响应版本时间"
          width="150"
        ></el-table-column>
        <el-table-column prop="queryVersion" label="版本号"></el-table-column>
        
        <el-table-column prop="createBy" label="创建人"></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="150"
        ></el-table-column>
      </el-table>
      <Pagination
        :page="detailForm.pageNum"
        :limit="detailForm.pageSize"
        :total="detailTotal"
        @pagination="detailPagination"
      />
    </el-dialog>
  </div>
</template>

<script>
import { equipUpdate } from "@/api/cabint";
import Pagination from "@/components/Pagination";
import { removeNullUndefined } from "@/utils/index.js";
import { mapGetters } from "vuex";

export default {
  components: {
    Pagination: Pagination,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "danger",
        1: "",
        2: "success",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      listLoading: false,
      searchForm: {
        equipmentType: "",
        pageNum: 1,
        pageSize: 10,
        status: null,
        upgradeType: "",
      },
      logList: [],
      total: 0, //总条数

      // 详情
      detailVisible: false,
      detailData: [],
      detailTotal: 0,
      detailForm: {
        pageNum: 1,
        pageSize: 10,
      },

      detailLoading: false,
    };
  },
  computed: {
    ...mapGetters(["enums"]),
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      this.total = 0;
      this.logList = [];
      equipUpdate(
        `/batch/list`,
        "post",
        { ...removeNullUndefined(this.searchForm) },
        1
      )
        .then((res) => {
          if (res.code == 200) {
            this.total = +res.total;
            this.logList = res.data;
          }
        })
        .finally(() => (this.listLoading = false));
    },
    pagination(val) {
      this.searchForm.pageNum = val.page;
      this.searchForm.pageSize = val.limit;
      this.getList();
    },
    detailPagination(val) {
      this.detailForm.pageNum = val.page;
      this.detailForm.pageSize = val.limit;
      this.getDetailList();
    },
    formatStatus(status) {
      return status != null
        ? this.enums.EQUIPMENT_UPGRADE_BATCH_STATUS.find(
            (pp) => pp.code == status
          ).label
        : "";
    },
    formatDetailStatus(status) {
      return status != null
        ? this.enums.EQUIPMENT_UPGRADE_LOG_STATUS.find(
            (pp) => pp.code == status
          ).label
        : "";
    },
    formatUpdateType(type) {
      return type != null
        ? this.enums.SOFTWARE_UPGRADE_TYPE.find((pp) => pp.code == type).label
        : "";
    },
    formatEquipType(val) {
      return val != null
        ? this.enums.EQUIPMENT_TYPE.find((pp) => pp.code == val).label
        : "";
    },
    formatResult(val) {
      return val != null
        ? this.enums.RESULT.find((pp) => pp.code == val).label
        : "";
    },
    formatIsOnline(val) {
      return val != null
        ? this.enums.IS_ONLINE.find((pp) => pp.code == val).label
        : "";
    },
    // 详情
    handleDetail(row) {
      this.detailVisible = true;
      this.currentRow = row;
      this.getDetailList();
    },
    async getDetailList() {
      this.detailLoading = true;
      const datas = await equipUpdate(
        `/logs/${this.currentRow.id}`,
        "post",
        this.detailForm
      ).finally(() => (this.detailLoading = false));
      this.detailData = datas.data;
      this.detailTotal = +datas.total;
    },
    clearSearch() {
      this.searchForm = {
        equipmentType: "",
        pageNum: 1,
        pageSize: 10,
        status: null,
        upgradeType: "",
      };
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/scss.scss";

.app-container {
  .search-form {
    @include flexLayout(center, space-between);
  }
  .titles {
    margin-top: 0;
  }
}
</style>
